<!--每次登录进入首页时弹出一张图片，图片占APP高度的三分之二并居中，可点击右上角关闭按钮关闭，弹出时间可自定义，单位：天-->
<template>
  <section class="bg" v-if="isShow">
    <section class="img-wrap">
      <div class="img"><img @click="go" :src="data.logoUrl" alt=""><i @click="close" class="close-btn"></i></div>
    </section>
  </section>
</template>

<script>
import moment from 'moment'
export default {
  name: 'picAd',
  data () {
    return {
      isShow: false,
      data: {
        logoUrl: ''
      }
    }
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      this.fetchData();
    },
    close () {
      this.isShow = false;
    },
    open () {
      this.isShow = true;
    },
    go () {
      if (!this.url) return console.error('没有配置链接');
      if (window.android && window.android.openUrlAdapt) {
        window.android.openUrlAdapt(this.url)
      }
    },
    fetchData () {
      this.fetchService.getsytpView().then(res => {
        console.log(res)
        if ( res.code !== 0 || typeof res.data !== 'object' ) return console.error('展示图片接口出错');
        let data = res.data;
        let {bulletEndTime, bulletStartTime, logoUrl} = data;
        let nowTime = Date.now();
        // 是登录时进入首页弹，并且是在规定的时间内
        if (logoUrl && moment(bulletEndTime).valueOf() > nowTime && moment(bulletStartTime).valueOf() < nowTime) {
          this.data.logoUrl = logoUrl;
          this.open();
          let linkStr = 'outlink|';
          if (data.hint.startsWith(linkStr)) this.url = data.hint.substr(linkStr.length);
          console.log(this.url);
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .bg {
    position:fixed;
    z-index: 9;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
  }
  .img-wrap {
    height:(2/3) *100vh;
    width:(2/3) *100vw;
    position:fixed;
    z-index: 9;
    top:(1/6) *100vh;
    left:(1/6) *100vw;
    .img,img {
      position: absolute;
      top:50%;
      transform:translateY(-50%);
      width:100%;
      max-height:100%;
      img {
        transform: none;
        position: static;
      }
      .close-btn {
        display: block;
        cursor: pointer;
        height: 40px;
        width: 40px;
        border: 4px solid #80808052;
        padding:10px;
        box-sizing: content-box;
        background:url("/static/images/close.png") transparent no-repeat center center;
        background-size:30px 30px;
        border-radius: 100%;
        position: absolute;
        z-index: 9;
        bottom:-10vh;
        right:50%;
        transform: translateX(50%);
      }
    }
  }
</style>
